<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="90%"
    append-to-body
    :before-close="handleClose"
    class="videoLogo"
  >
    <div style="width: 100%; height: 100vh">
      <video
        :id="'videoPlay' + shipingliuid"
        class="video-js vjs-default-skin"
        controls
        playsinline
        autoplay="autoplay"
        style="width: 100%; height: 100%"
      >
        <source :src="shipingliusrc" type="application/x-mpegURL" />
      </video>
      <div style="position: absolute; left: 1.5%; top: 35%">
        <div v-for="(item, k) in leftList" :key="k" class="m_til">
          <div>{{ item.name }}</div>
          <div>{{ leftData[item.code] || "0" }}{{ item.unit }}</div>
        </div>
      </div>
      <div style="position: absolute; right: 1.5%; top: 35%">
        <div class="m_til">
          <div>当前闸次号：</div>
          <div>{{ rightData["zch"] || "--" }}</div>
        </div>
        <div class="m_til">
          <div>航行方向：</div>
          <div>
            {{
              rightData["hx"] == ""
                ? "--"
                : rightData["hx"] == 0
                ? "上行"
                : "下行"
            }}
          </div>
        </div>
        <div class="m_til" style="flex-direction: column">
          <div>闸室船舶： {{ zscbList.length }}</div>
          <div v-for="(m, k) in zscbList" :key="k">
            {{ k + 1 }}.{{ m.cmch }}
          </div>
        </div>
      </div>
      <div style="position: absolute; right: 1.5%; top: 1.5%">
        <i
          class="el-icon-close"
          style="font-size: 30px; cursor: pointer; color: #fff"
          @click="handleClose"
        ></i>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import "videojs-contrib-hls";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { getLockChamber } from "@/api/daping/daping.js";
export default {
  data() {
    return {
      shipingliuid: "",
      shipingliusrc: "",
      dialogVisible: true,
      options0: null,
      leftList: [
        { name: "船闸名称：", code: "czmc", unit: "" },
        { name: "上游水位：", code: "", unit: "m" },
        { name: "下游水位：", code: "", unit: "m" },
        { name: "上游待闸船舶：", code: "sydzsl", unit: "艘" },
        { name: "下游待闸船舶：", code: "xydzsl", unit: "艘" },
      ],
      leftData: {},
      rightData: {},
      zscbList: [{ cmch: "xxxx" }],
      dangqianxuanzhogn: "",
    };
  },
  mounted() {},
  methods: {
    init(url, b, c) {
      // 从localStorage中获取用户对象的JSON字符串
      let userJson = localStorage.getItem("user");
      // 将JSON字符串转换回对象
      let user = JSON.parse(userJson);
      // 现在可以使用user对象中的数据了
      console.log(user.name);
      // 将浏览器中存储的数据绑定到当前切换展示的船闸
      this.dangqianxuanzhogn = user.name;
      this.leftData = { czmc: user.name };
      this.shipingliuid = Math.round(Math.random() * 1000) + 1;
      this.shipingliusrc = url;
      this.dialogVisible = true;
      this.options0 = c;
      this.getLockChamber();
      this.$nextTick(() => {
        this.dp0 = videojs("videoPlay" + this.shipingliuid, c);
      });
    },
    handleClose() {
      this.$parent.videoQpShow = false;
      if (this.dp0 != null) {
        this.dp0.dispose(); // dispose()会直接删除Dom元素
      }
    },
    getLockChamber() {
      getLockChamber({}).then((res) => {
        if (this.dangqianxuanzhogn == "宿豫船闸") {
          let zsh = res.data.zsh;
          this.rightData.hx = zsh.ddz.length > 0 ? zsh.ddz[0].hx : "";
          this.rightData.zch = zsh.ddz.length > 0 ? zsh.ddz[0].zch : "";
          this.zscbList = zsh.ddz;
          this.leftData.sydzsl = zsh.sxdzAll.length;
          this.leftData.xydzsl = zsh.xxdzAll.length;
        } else {
          let ka = res.data.ka;
          this.rightData.hx = ka.ddz.length > 0 ? ka.ddz[0].hx : "";
          this.rightData.zch = ka.ddz.length > 0 ? ka.ddz[0].zch : "";
          this.zscbList = ka.ddz;
          this.leftData.sydzsl = ka.sxdzAll.length;
          this.leftData.xydzsl = ka.xxdzAll.length;
        }
      });
    },
  },
};
</script>
<style scoped>
.videoLogo ::v-deep .el-dialog {
  margin-top: 0 !important;
}
.videoLogo ::v-deep .el-dialog .el-dialog__header {
  display: none;
}
.videoLogo ::v-deep .el-dialog .el-dialog__body {
  padding: 0;
}
.m_til {
  display: flex;
  font-size: 30px;
  color: #ffbe00;
}
</style>
